<template>
  <view class="avatar-popup">
    <u-popup
      v-model="show"
      mode="center"
      :closeable="false"
      border-radius="0"
      width="525"
      @close="close"
    >
      <view class="popup-content1">
        <swiper
          class="swiper"
          circular
          :autoplay="true"
          :interval="6000"
          :duration="500"
          :current="current"
          @change="changePoster"
        >
          <swiper-item v-for="(item, index) in posterListData" :key="index">
            <image :src="item.url" mode="scaleToFill" class="poster-item" />
          </swiper-item>
        </swiper>
        <view class="btn-tips" @click="savePoster">
          <!-- #ifdef H5 -->
          <text>长按保存</text>
          <!-- #endif -->
          <!-- #ifndef H5 -->
          <text>保存图片</text>
          <!-- #endif -->
        </view>
      </view>
    </u-popup>
    <lPainter
      :board="posterObj"
      ref="painter"
      @success="createPosterSuccess"
      :isRenderImage="true"
    ></lPainter>
  </view>
</template>

<script>
import { posterList } from "@/api/applet";
import lPainter from "@/components/limePainter/index.vue";
export default {
  components: {
    lPainter,
  },
  props: {
    popupShow: {
      default: false,
    },
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      current: 0,
      show: this.popupShow,
      infoData: null,
      posterListData: [],
      posterListObj: [],
      posterObj: {
        width: "750rpx",
        height: "1280rpx",
        background: "#fff",
        borderRadius: "0rpx",
        views: [],
      },
      list: [],
    };
  },
  watch: {
    popupShow: {
      immediate: true,
      handler(val, oldValue) {
        this.show = val;
      },
    },
  },
  methods: {
    // 获取海报图片
    getPostList() {
      // console.log(34, this.$store.state, this.$store.state.posterList);
      posterList({
        type: "1",
      }).then((result) => {
        if (result && result.code === 200) {
          result.data.forEach(async (item, index) => {
            item.image = `${item.image}?${Date.parse(new Date())}`;
            // console.log(222, item.image);
            this.createPost(item, index);
          });
          this.list = result.data;
        }
      });
      // const list = this.$store.state.posterList;
      // if (this.posterListData.length > 0) {
      //   return;
      // }
    },

    // 创建海报
    createPost(params, index) {
      const businessId = uni.getStorageSync("businessId");
      setTimeout(() => {
        this.posterObj.views = [
          {
            type: "image",
            src: params.image,
            css: {
              left: "0",
              top: "0",
              width: "750rpx",
              height: "1280rpx",
              borderRadius: "0",
            },
          },
          // #ifdef H5
          {
            type: "qrcode",
            text: `https://${location.host}?source_code=${this.$store.state.userInfo.invitation_code}&id=${businessId}`,
            css: {
              left: "138rpx",
              top: "1060rpx",
              width: "160rpx",
              height: "160rpx",
              background: "#ffffff",
            },
          },
          // #endif
          // #ifdef MP
          // {
          //   type: "qrcode",
          //   text: "https://uniapp.dcloud.net.cn/plugin/",
          //   css: {
          //     left: "138rpx",
          //     top: "1060rpx",
          //     width: "160rpx",
          //     height: "160rpx",
          //     background: "#ffffff",
          //   },
          // },
          // #endif
        ];
      }, 1200 * index + 1);
    },

    // swiper切换
    changePoster(e) {
      this.current = e.detail.current;
    },

    // 创建成功
    createPosterSuccess(img) {
      this.posterListData.push({
        url: img,
      });
      console.log(
        "createPosterSuccess",
        this.posterListData.length,
        this.list.length
      );
      if (
        this.posterListData.length > 0 &&
        this.posterListData.length == this.list.length
      ) {
        this.$emit("open", true);
      }
    },

    // 关闭弹窗
    close() {
      this.posterListData = [];
      this.$emit("close", false);
    },

    // 保存图片
    savePoster() {
      // #ifdef MP-WEIXIN
      uni.showLoading({
        title: "保存中",
        mask: true,
      });
      uni.saveImageToPhotosAlbum({
        //保存到本地
        filePath: this.posterListData[this.current].url,
        success(res) {
          uni.hideLoading();
          uni.showToast({
            title: "保存成功",
            icon: "none",
          });
        },
        fail(err) {
          console.log(err);
          uni.hideLoading();
        },
      });
      // #endif
    },
  },
};
</script>
<style lang="scss" scoped>
.popup-content1 {
  background-color: #fff;
  color: #fff;
  position: relative;
  text-align: center;
  padding-bottom: 1rpx;

  .swiper {
    height: 896rpx;
  }

  .poster-item {
    height: 896rpx;
    width: 525rpx;
  }

  .btn-tips {
    height: 64rpx;
    line-height: 64rpx;
    color: #fff;
    border-radius: 32rpx;
    background: linear-gradient(
      -90deg,
      $uni-color-primary,
      $uni-color-primary2
    );
    margin: 24rpx 100rpx;
  }
}
</style>
